<template>


	<view class="main">
		<u-navbar :fixed="false" title="员工考勤" @rightClick="rightClick" :autoBack="true"></u-navbar>
		<view class="container">

			<view class="top">
				<view class="content">
					<ren-calendar :disabledAfter='true' ref='ren' :markDays='markDays' @onDayClick='onDayClick'></ren-calendar>
				</view>
			</view>


			<view class="bykq">
				<u-tabs :list="list1" @click="clicktab"></u-tabs>
			</view>

			<view class="sxb">

				<view class="sxbb ">

					<view class="row space-between">

						<view class="row">
							<view>
								<image class="sbk" src="/static/images/sbk.png"></image>
							</view>
							<view class="sbdka ">
								<view class="sbdkwz">上班打卡</view>
								<view class="sbdktime">09:00</view>
							</view>
						</view>
						<!-- "status": 1 //状态 1已排班 2正常 3请假 4调休 5迟到 6早退 7旷工 8缺卡 -->

						<view class="column_c center" style="width: 600rpx;height: 100rpx;">
							<view class="dkdk center" v-if="kqinfo.status==5">迟到</view>
							<view v-else>
								<view class="dkdk center" v-if="kqinfo.status==1">已排班</view>
								<view class="dkdk center" v-if="kqinfo.status==3">请假</view>
								<view class="dkdk center" v-if="kqinfo.status==4">调休</view>
								<view class="dkdk center" v-if="kqinfo.status==7">旷工</view>
								<view class="dkdk center" v-else-if="kqinfo.status==8">缺卡</view>
								<image class="ggg center" v-else src="/static/images/ggg.png"></image>
							</view>
							<view class="xbsj">{{clock_in}}</view>
						</view>

					</view>

					<view class="xinga"></view>


					<view class="row space-between">

						<view class="row">
							<view>
								<image class="sbk" src="/static/images/xbk.png"></image>
							</view>
							<view class="sbdka ">
								<view class="sbdkwz">下班打卡</view>
								<view class="sbdktime">18:00</view>
							</view>
						</view>

						<view class="column_c center" style="width: 600rpx;">
							<view class="dkdk center" v-if="kqinfo.status==6">早退</view>
							<view v-else>
								<view class="dkdk center" v-if="kqinfo.status==1">已排班</view>
								<view class="dkdk center" v-if="kqinfo.status==3">请假</view>
								<view class="dkdk center" v-if="kqinfo.status==4">调休</view>
								<view class="dkdk center" v-if="kqinfo.status==7">旷工</view>
								<view class="dkdk center" v-else-if="kqinfo.status==8">缺卡</view>
								<image class="ggg center" v-else src="/static/images/ggg.png"></image>
							</view>
							<view class="xbsj">{{clock_out}}</view>
						</view>

					</view>

				</view>


			</view>
		</view>





	</view>
</template>

<script>
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
	import api_clockin from '@/api/clockin.js';

	export default {
		components: {
			RenCalendar
		},
		data() {
			return {
				list1: [{
					name: '异常',
				}, {
					name: '迟到/早退',
				}, {
					name: '缺卡'
				}],
				indexArr: '',
				valueArr: '',
				curDate: '',
				markDays: [],
				access_token: null,
				staff: null,
				kqinfo: null,
				clock_in: null,
				clock_out: null,
				date: '2024-12-09',
				status: 3, //筛选状态 1全部 2正常 3异常 4迟到早退 5缺卡 6调休 7请假
			};
		},

		async onLoad(option) {
			this.staff = option.id;

		},

		async onShow() {
			this.access_token = uni.getStorageSync('access_token');
			if (!this.access_token) {
				uni.navigateTo({
					url: '/pages/auth/login'
				});
			} else {
				this.date = this.getNowDate();
				this.getattendanceStaffListFuc(); //获取员工考勤信息
			}
		},

		methods: {

			//获取员工考勤信息
			async getattendanceStaffListFuc() {
				var per = {
					staff: this.staff,
					date: this.date,
					status: this.status,
				}

				const res = await api_clockin.getattendanceStaffList(per);
				if (res.code == 1) {
					this.kqinfo = res.data.info;
					if (this.kqinfo.clock_in) {
						this.clock_in = this.getsftime(this.kqinfo.clock_in);
					}
					if (this.kqinfo.clock_out) {
						this.clock_out = this.getsftime(this.kqinfo.clock_out);
					}
					return;
				} else {
					this.kqinfo = '';
					this.clock_in = '';
					this.clock_out = '';
					this.$util.msg(res.message);
					return;
				}
			},

			clicktab(item) {
				if (item.index == 0) {
					this.status = 3
				}
				if (item.index == 1) {
					this.status = 4
				}
				if (item.index == 2) {
					this.status = 5
				}
				this.getattendanceStaffListFuc();
			},
			//获取当前时间
			getNowDate() {
				const now = new Date();
				// 格式化日期为 YYYY-MM-DD
				const year = now.getFullYear(); // 获取年份
				const month = String(now.getMonth() + 1).padStart(2, '0'); // 获取月份（0-11），+1 后补零
				const day = String(now.getDate()).padStart(2, '0'); // 获取日期，补零
				const formattedDate = `${year}-${month}-${day}`;
				console.log(formattedDate); // 输出格式为 2024-10-12
				return formattedDate;
			},


			getsftime(timees) {
				const dateTime = timees;
				const timePart = dateTime.split(" ")[1]; // 分割字符串，取第二部分
				const timeShort = timePart.slice(0, 5); // 截取前5个字符
				console.log(timeShort); // 输出：09:51
				return timeShort;
			},

			onDayClick(data) {
				this.curDate = data.date;
				this.date = this.curDate;
				this.getattendanceStaffListFuc();
			},


		}
	};
</script>

<style lang="scss">
	page,
	.container {
		min-height: 1400rpx;
		background-color: #f6f7f9;
	}

	.content {
		.change {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			margin-top: 100rpx;
			height: 100rpx;
			color: #b89249;
			background-color: #21191b;
		}
	}

	.top {
		margin-top: 15rpx;
	}

	.sxb {
		padding: 0 32rpx;
		margin-top: 30rpx;
	}

	.bykq {
		padding: 0 32rpx;
		margin-top: 20rpx;

	}

	.sxbb {
		height: 346rpx;
		width: 100%;
		background: #FFFFFF;
		border-radius: 15rpx;
		padding: 20px;

	}

	.sbk {
		width: 64rpx;
		height: 64rpx;
	}

	.ggg {
		width: 32rpx;
		height: 32rpx;
		margin-top: 10rpx;
	}

	.sbdka {
		margin-left: 60rpx;
		width: 390rpx;
	}

	.sbdkwz {
		font-weight: 500;
		font-size: 32rpx;
		color: #3D3D3D;

	}

	.sbdktime {
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.6);
		margin-top: 24rpx;
	}

	.xbsj {
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.6);
		margin-top: 24rpx;
	}

	.xinga {
		width: 100%;
		border: 1rpx dashed #E7E7E7;
		margin-top: 32rpx;
		margin-bottom: 32rpx;
	}

	.dkdk {
		width: 120rpx;
		height: 52rpx;
		background: #F9E9E9;
		border-radius: 26rpx 26rpx 26rpx 26rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FF2E2E;
	}
</style>